<script setup lang="ts">
import { defineProps } from 'vue'
import Loading from '@/components/Loading.vue'

const props = defineProps({
  username: {
    type: String,
    required: true
  },
  avatar: {
    type: String,
    required: true
  }
})
</script>

<template>
  <!--// TODO 用户卡片设计，快把 CSS::transform 学完-->
  <div class="user__card">
    <div class="user__avatar">
      <img :src="props.avatar" v-if="avatar">
      <loading v-else/>
    </div>
    <div class="user__info">
      <h2 class="user__name">{{ props.username }}</h2>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .user__card{
    width: 100%;
    height: 140px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: var(--spacing-xs);
  }
  .user__avatar{
    height: 50%;
  }
  .user__avatar img{
    height: 100%;
    object-fit: contain;
  }
</style>